<template>
  <div class="app-head-contain">
  </div>
</template>


<script>
    import { mapState, mapActions } from 'vuex';
    import util from "../../../libs/util";
    export default {
        name: "headerTopIndex",
        computed: {
            ...mapState('home/site', [
                "site",
                "openSite"
            ]),
            ...mapState('home/user', [
                "userInfo"
            ])
        },
        data() {
            return {}
        },

        created() {
            this.getInit();
        },
        methods: {
            getInit:function () {

            },

            tapOpenUser:function(){
                this.$router.push('/user');
            },
            /**
             * 打开列表
             */
            tapDropdown:function (name) {
                if(name == 'user') {
                    this.$router.push('/user');
                }

                if(name == 'buy') {
                    this.$router.push('/user/purchase');
                }

                if(name == 'seting') {
                    this.$router.push('/user/account');
                }
                //用户退出
                if(name == 'logut') {
                    this.$confirm('你确定要退出吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(()=>{
                            util.cookies.remove('user_info');
                            util.cookies.remove('token');
                            util.cookies.remove('system_uuid')
                            // 删除localStorage
                            this.$store.dispatch('pub/db/databaseClear', {
                                user: true
                            });
                            this.$store.dispatch('home/user/set', null, {root: true});
                            // 跳转路由
                            this.$router.push('/login/index');
                        })
                        .catch((err)=>{
                            console.log(err);
                        });
                }
            }

        }
    }
</script>
<style scoped>
  .app-head-contain{background: #ffffff;}
  .app-head{width:1180px;margin: 0px auto;height:100px;position: relative;}
  .app-head-logo{position: absolute;top:0px;left:0px;height:100px;width:250px; line-height: 100px; text-align: center;}
  .app-head-logo img{width: 200px;vertical-align: middle;max-height: 100px;}
  .app-head-user{height:100px;position: absolute;top:0px;right:0px;}
  .app-user{position: relative;top:50%;margin-top: -20px;}
  a.app-head-a{color:#404040;font-size: 20px;font-weight: 700;display: block;height:40px;line-height: 40px;}
  a.app-head-btn{width:100px;height:40px;line-height: 40px;border-radius: 20px;text-align: center;background: #FFB300;color:#ffffff;font-size: 20px;font-weight: 700;
    position: relative;top:50%;margin-top: -20px;margin-right: 57px;}
  span.app-head-line{display:block;width: 1px;height: 20px;background:#707070;opacity: 0.31;margin-top:10px;position: relative;margin-left: 10px;margin-right:10px}
  .app-head-mid{margin: 0px auto;height:100px; text-align: center;}
  a.app-head-nav{display: inline-block;height:50px;line-height: 50px;color:#404040;font-size: 23px;font-weight: 700;position: relative;position: relative;top:50%;margin-top: -25px;}
  a.app-head-nav .bline{position: absolute;left:4px;right:4px;bottom:0px;height:4px;border-radius: 2px;display: block;}
  a.app-head-nav.active{color:#EA312B}
  a.app-head-nav.active .bline{background:#EA312B}
  .app-banner{}

  .userinfo{font-size: 16px;color:#EA312B;cursor: pointer;}
</style>
